<template>
  <div class="login-page">
    <!-- 左侧登录表单 -->
    <div class="login-left">
      <LoginPage />
    </div>

    <!-- 右侧纯净图片 -->
    <div class="login-right">
      <img
          src="../assets/login.jpg"
          alt="医学影像分析"
          class="pure-image"
      />
    </div>
  </div>
</template>

<script setup>
import LoginPage from '@/components/login/Loginpage.vue'
</script>

<style scoped>
.login-page {
  display: flex;
  height: 100vh;
  background: #ffffff;
}

/* 左侧登录区 */
.login-left {
  flex: 1;
  max-width: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
}

/* 右侧图片区 */
.login-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
}

.pure-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.3s ease;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .login-right {
    flex: 0.6;
  }
}

@media (max-width: 768px) {
  .login-right {
    display: none;
  }

  .login-left {
    min-width: 100%;
    background: #ffffff;
  }
}

@media (min-width: 1920px) {
  .login-page {
    max-width: 1920px;
    margin: 0 auto;
  }
}
</style>